<template>
	<view class="welfare-page">
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
			:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" mode=""></image>

		<comNavHeight></comNavHeight>

		<view class="welfare-box" :style="{ height: `calc(100vh - 178rpx - ${commonNavHeight})` }">

			<view class="welfare-swiper">
				<swiper class="welfare-banner mx-auto" @change="swiperChange" :autoplay="true" :interval="3000"
					:duration="500" :circular="true">
					<swiper-item v-for="(item, index) in bannerImgList" @click="gooGoodsPage(item, index)" :key="index">
						<image :style="{
								'z-index': 10,
								'opacity': currentSwiperImgIndex === index ? 1 : 0,
								'transition': 'all 1s',
							}" class="welfare-banner-border absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="item.bg_image || `${commonConfigs.domainFrontFileLink}/files/images/home/swiper-bg.png`"
							mode="aspectFill" />
							
						<image :style="{
								'z-index': 10,
								'opacity': currentSwiperImgIndex === index ? 1 : 0.3,
								'transition': 'all 3s',
							}" class="welfare-img absolute" style="z-index: 20" :src="item.image" mode="aspectFill" />
					</swiper-item>
				</swiper>
			</view>


			<view class="welfare-box-list flex-wrap flex-justify-content-between">
				<!-- #ifdef MP-WEIXIN -->
				<view class="welfare-list-item relative" v-for="(item, index) in receiveCollectObj" :key="index"
					@click="gooDetailPageFun(item.pageLink)" v-if="item.isShowRecovery ? userInfo.show_recovery : true">
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" class="bg"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/welfare/${item.imgIcon}.png`" mode="">
					</image>
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.isShowReceiveIcon"
						class="receive-icon absolute"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/receive-bg-icon.png`" mode="">
					</image>
				</view>
				<view class="welfare-list-item relative"></view>
				<view class="welfare-list-item relative"></view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="welfare-list-item relative" v-for="(item, index) in receiveCollectObj" :key="index"
					@click="gooDetailPageFun(item.pageLink)">
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" class="bg" style="width: 180rpx;height: 222rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/welfare/${item.imgIcon}.png`" mode="">
					</image>
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.isShowReceiveIcon"
						class="receive-icon absolute"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/receive-bg-icon.png`" mode="">
					</image>
				</view>
				<view class="welfare-list-item relative"></view>
				<view class="welfare-list-item relative"></view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store';
	import {
		setJumpFunTo
	} from '@/setupproject/TOOLS_FUN';
	import {
		getUserInfoEnableApi,
		getHomeBannerApi
	} from '@/setupproject/INTERFACE';

	export default {
		name: 'tabWelfare',
		data() {
			return {
				currentSwiperImgIndex: 0, // 当前轮播图下标
				bannerImgList: [], //轮播图
				receiveCollectObj: {
					dayRebateObj: {
						imgIcon: 'day-rebate-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/dayRebatePage/dayRebatePage',
						isShowRecovery: false
					},
					signInObj: {
						imgIcon: 'sign-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/signInPage/signInPage',
						isShowRecovery: false
					},
					vipObj: {
						imgIcon: 'vip-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/vipPage/vipPage',
						isShowRecovery: false
					},
					weekRebateObj: {
						imgIcon: 'week-rebate-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/weekRebatePage/weekRebatePage',
						isShowRecovery: false
					},
					rouletteObj: {
						imgIcon: 'roulette-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/rouletteGamePage/rouletteGamePage',
						isShowRecovery: true
					},
					welfareHouseObj: {
						imgIcon: 'house-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/welfareHousePage/welfareHousePage',
						isShowRecovery: true
					},
					integralShopObj: {
						imgIcon: 'integral-img-bg',
						isShowReceiveIcon: false,
						pageLink: '/secondary/integralRewardPage/integralRewardPage',
						isShowRecovery: false
					},
				},
			}
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			userInfo() {
				return store.getters.userInfo;
			},
			token() {
				return this.$store.getters.token;
			},
		},
		methods: {
			// 父组件tabbar触发当前子组件事件
			async loadDataGetFun() {
				if (this.token) {
					await this.$store.dispatch('USER_INFO_GET_FUN');
				}
				await this.getHomeBannerApi();
				await this.getUserInfoEnableFun();
			},

			// 获取轮播图
			async getHomeBannerApi() {
				const {
					data
				} = await getHomeBannerApi({
					scene: 5, // 福利页轮播图
					platform: uni.getSystemInfoSync().platform,
					pack_name: this.commonConfigs.appPackageName,
					version: this.commonConfigs.appPackageVer,
				});
				this.bannerImgList = data.banner || [];
			},

			// 轮播图跳转
			gooGoodsPage(item, index) {
				return setJumpFunTo(item, index);
			},
			// 轮播图切换时间
			swiperChange(item) {
				this.currentSwiperImgIndex = item.detail.current;
			},

			async gooDetailPageFun(url) {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await this.$store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif

				uni.navigateTo({
					url
				})
			},
			getUserInfoEnableFun() {
				getUserInfoEnableApi({
					type: 'all',
				}).then(res => {
					if (res && res.data) {
						this.receiveCollectObj.dayRebateObj.isShowReceiveIcon = res.data.day_rebate_enable || false;
						this.receiveCollectObj.signInObj.isShowReceiveIcon = res.data.sign_in_enable || false;
						this.receiveCollectObj.rouletteObj.isShowReceiveIcon = res.data.task_enable || false;
						this.receiveCollectObj.vipObj.isShowReceiveIcon = res.data.vip_enable || false;
						
						// 告知Tabbar的isWelfareReceiveIcon值
						let value = (res.data.sign_in_enable || res.data.task_enable || res.data.vip_enable || res.data.day_rebate_enable || false);
						this.$emit('getWelfareFlagFun', value);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.welfare-page {
		.welfare-box {
			overflow-y: auto;

			.welfare-box-list {
				margin-top: 18rpx;
				padding: 0 18rpx;

				.welfare-list-item {
					width: 180rpx;
					height: 222rpx;
					margin-bottom: 42rpx;

					.receive-icon {
						left: -8rpx;
						top: 24rpx;
						width: 73rpx;
						height: 20rpx;
					}
				}
			}

			.welfare-swiper {
				margin: 0 auto;
				width: 710rpx;
				height: 340rpx;
				
				.welfare-banner {
					width: 100%;
					height: 340rpx;
				}
				
				.welfare-banner-border {
					width: 100%;
					height: 340rpx;
				}

				.welfare-img {
					width: 702rpx;
					height: 332rpx;
					top: 4rpx;
					left: 4rpx;
				}
			}
		}
	}
</style>